Description

Adds a global loading indicator for long running actions at the top of the page.

How to use it (for devs)

Simply wrap your Promise in the addTask method provided by the loadingService:

loadingService.addTask(() => {
  return new Promise((resolve, reject) => {
    resolve(true)
  })
})

The method also provides a callback setProgress which can be used to update the progress of a task.

loadingService.addTask((setProgress) => {
  const promises = []
  const actions = [1, 2, 3, 4, 5]

  for (const [i, action] of actions.entries()) {
    promises.push(
      new Promise((resolve, reject) => {
        setProgress({ total: actions.length, current: i + 1 })
        resolve(true)
      })
    )
  }

  return Promise.all(promises)
}, { indeterminate: false })

The following options can be provided to addTask:

• debounceTime - Time until the loading state for a task is set active. Defaults to 200 ms
• indeterminate - Determines if the task is in an indeterminate state. Defaults to true.

Note that the loading bar won't show a progress when at least one task is in an indeterminate state.

Thx to @dschmidt for helping me out with the task adding & handling!

Video

Related Issue

• Fixes [Web] Add Loading Indicator #6183
• Fixes [QA] Show progress bar when delete or rename takes longer #2134

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Technical debt
• Tests